<template>
	<view class="page">
		<u--form errorType="toast" :model="form" ref="myForm" :rules="rules" labelWidth="120">
			<u-form-item label="门店编码" prop="storeNumber" borderBottom>
				<u-input v-model="form.storeNumber" border="none" placeholder="请输入" inputAlign="right" disabledColor="#fff"/>
			</u-form-item>
			<u-form-item label="门店名称" prop="storeName" borderBottom>
				<u-input v-model="form.storeName" border="none" placeholder="请输入" inputAlign="right" disabledColor="#fff"/>
			</u-form-item>
			<u-form-item label="启动资金" prop="investAmount" borderBottom>
				<u-input v-model="form.investAmount" border="none" placeholder="请输入" type="digit" inputAlign="right" disabledColor="#fff" />
			</u-form-item>
			<u-form-item label="门店联系人" prop="linkMan" borderBottom>
				<u-input v-model="form.linkMan" border="none" placeholder="请输入" inputAlign="right" disabledColor="#fff" />
			</u-form-item>
			<u-form-item label="联系电话" prop="mobile" borderBottom>
				<u-input v-model="form.mobile" border="none" placeholder="请输入" inputAlign="right" disabledColor="#fff" />
			</u-form-item>
			<u-form-item label="门店地区" prop="areaText" borderBottom @click="showArea=true">
				<u-input v-model="form.areaText" border="none" placeholder="请选择" inputAlign="right" disabledColor="#fff" />
				<u-icon slot="right" name="arrow-right" v-if="isEdit"/>
			</u-form-item>
			<u-form-item label="门店详细地址" prop="address" borderBottom>
				<u-input v-model="form.address" border="none" placeholder="请输入内容" inputAlign="right" disabledColor="#fff"/>
			</u-form-item>
		</u--form>
		<view v-if="isEdit" class="padding-20 bg-white">
			<u-line-progress  :percentage="percentage" activeColor="#e54d42"></u-line-progress>
			<view class="mt-10">
				当前进度: <text class="line-red">{{percentage}}%</text>
				<text class="ml-10" v-if="form.investTotal > 0">已投资: ￥{{form.investTotal}}</text>
			</view>
		</view>
		<view class="pl-60 pr-60 mt-60">
			<view v-if="isEdit"><u-button color="#3c9cff" text="保存" @click="onModify" size="large" /></view>
			<view class="mt-20" v-if="isEdit" ><u-button color="#e54d42" text="提交审核" :disabled="percentage!=100" @click="submit" size="large" /></view>
			<u-button v-else color="#e54d42" text="提交申请" @click="submit" size="large" />
		</view>
		<u-picker 
			ref="uAreaPicker"
			:show="showArea" 
			:columns="areas" 
			keyName="name" 
			:closeOnClickOverlay="true"
			@cancel="showArea=false"
			@close="showArea=false"
			@confirm="confirmAreas" 
			@change="changeHandler">
		</u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cDate from '@/common/date.js'
	export default {
		data() {
			return {
				showArea:false,
				areas: [],
				isEdit: false,
				percentage: 0,
				form: {
					storeNumber:'',
					storeName:'',
					investAmount: '',
					mobile: '',
					linkMan: '',
					areaId: '',
					areaText:'',
					address:'',
				},
				rules: {
					storeNumber: [{
						required: true,
						message: '门店编码不能为空',
						trigger: ['blur', 'change']
					}],
					storeName: [{
						required: true,
						message: '门店名称不能为空',
						trigger: ['blur', 'change']
					}],
					linkMan: [{
						required: true,
						message: '联系人不能为空',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: '联系电话不能为空',
						trigger: ['blur', 'change']
					}],
					areaId: [{
						required: true,
						message: '门店区域不能为空',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '门店详细地址不能为空',
						trigger: ['blur', 'change']
					}],
					// investAmount: [{
					// 	required: true,
					// 	message: '启动资金不能为空',
					// 	trigger: ['blur', 'change']
					// }],
				}
			}
		},
		onLoad(opt) {
			this.getAreaCheckedList()
			if(opt.id){
				this.isEdit = true
				this.getStoreInfo(opt.id)
				uni.setNavigationBarTitle({
					title:'审核门店'
				})
			}
			uni.$on('user-category', obj=>{
				this.form.userCategoryId = obj.id
				this.form.userCategoryName = obj.name
			})
			uni.$on('user-grade', obj=>{
				this.form.gradeId = obj.id
				this.form.gradeName = obj.title
			})
		},
		onUnload() {
			uni.$off('user-category')
			uni.$off('user-grade')
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			// onSeqy(){
			// 	if(this.isEdit)return 
			// 	this.showArea=true
			// },
			async changeHandler(e) {
			  const { columnIndex, value, picker = this.$refs.uAreaPicker } = e;
			  const { id } = value[columnIndex];
	
			  const getAreaChildren = async (id) => {
			    const res = await this.$reqJsonPost('ToolsGetAreaChildren', { id });
			    return [res];
			  };
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			  if (columnIndex === 0) {
			    const columnData1 = await getAreaChildren(id);
			    picker.setColumnValues(1, columnData1[0]);
					// picker为选择器this实例，变化第二列对应的选项
			    const columnData2 = await getAreaChildren(columnData1[0][0].id);
			    picker.setColumnValues(2, columnData2[0]);
			  } else if (columnIndex === 1) {
			    const columnData3 = await getAreaChildren(id);
			    picker.setColumnValues(2, columnData3[0]);
			  }
			},
			confirmAreas(e){
				this.form.areaId = e.value[2].id
				this.form.areaText = e.value[0].name === e.value[1].name?`${e.value[0].name}-${e.value[2].name}`:
				`${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`
				
				this.showArea = false
			},
			async getAreaCheckedList() {
			  try {
			    const economize = await this.$reqJsonPost('ToolsGetAreaCheckedList', { id: 0 });
			    this.areas[0] = economize[0].list;
			
			    const market = await this.$reqJsonPost('ToolsGetAreaChildren', { id: economize[0].list[0].id });
			    this.areas[1] = market;
			
			    const distinguish = await this.$reqJsonPost('ToolsGetAreaChildren', { id: market[0].id });
			    this.areas[2] = distinguish;
			  } catch (error) {
			    // 处理错误
					console.log('获取地址失败', error)
			  }
			},
			onUserSource(e){
				this.form.sourceText = e.value[0].description
				this.form.source = e.value[0].value
				this.showUserSource = false
			},
			getStoreInfo(id) {
				this.$reqJsonPost('StoreApplyGetDetails',{id:id}).then(res => {
					this.form = res.data
					this.percentage = this.getPercent(res.data.investTotal, res.data.investAmount, false)
					// console.log('nimad', this.percentage)
				})
			},
			onModify(){
				this.$reqJsonPost('StoreApplyDoEdit', this.form).then(res=>{
					this.$refs.uToast.show({
						message: res.msg
					})
				})
			},
			submit() {
				const that = this
				this.$refs.myForm.validate().then(res => {
					that.$reqJsonPost(that.isEdit?'StoreApplyDoCheck':'StoreApplyDoCreate', that.form).then(res=>{
						that.$refs.uToast.show({
							message: res.msg,
							complete() {
								uni.$emit('upStoreApplyData')
								uni.navigateBack()
							}
						})
					})
				})
			},
			getPercent(curNum, totalNum, isHasPercentStr) {
				curNum = parseFloat(curNum);
				totalNum = parseFloat(totalNum);
				if (isNaN(curNum) || isNaN(totalNum)) {
					return '-';
				}
				return isHasPercentStr ?
				totalNum <= 0 ? '0%' : (Math.round(curNum / totalNum * 10000) / 100.00 + '%') :
				totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00);
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
